<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>数据后台管理系统->部门管理</title>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <meta name="description" content="描述内容...">
  <meta name="keywords" content="关键词...">
  <link rel="shortcut icon" href="../images/system.ico">

  <!--  css-->
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../css/main-rights.css">
<!--  js-->
  <script src="../js/jq/jquery_3.6_min.js"></script>
  <script src="../js/vue/axios-0.18.0.js"></script>
  <script src="../js/vue/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>

</head>
<body>
<div id="app">
  <!--顶部-->
  <header class="el-header">
  <!--  logo-->
    <div class="logo">
      <a href="../index.html" class="text_underline">
        <h2 class="text-success logo-h">{{sysTitle}}</h2>
      </a>
    </div>

  <!--  导航-->
    <div class="header-nav">
      <ul class="h-nav">
        <li>
          <a href="../index.html" > 首页</a>
        </li>
        <li>
          <a href="#"> 系统管理 <span class="li-font1"></span></a>
          <ul class="nav-sub">
            <li v-for="item in subList1"><a :href="item.href">{{item.li}}</a></li>
          </ul>
        </li>
        <li>
          <a href="#"> 个人管理 <span class="li-font2"></span></a>
          <ul class="nav-sub">
            <li v-for="item in subList2"><a :href="item.href">{{item.li}}</a></li>
          </ul>
        </li>
        <li>
          <a href="#"> 关于</a>
        </li>
      </ul>
    </div>
  </header>

   <!--主部-->
  <div class="el-main">
    <!--  左边-->
    <div class="main-left">
      <!--    头像-->
      <div class="left-head-photo">
        <img :src="userImageSrc" alt="头像">
        <i class="i-lh1"><span class="photo-state"></span>{{userID}}</i>
        <i class="i-lh2">{{userName}}</i>
      </div>

      <!--    菜单-->
      <div class="left-menu">菜单</div>

      <!--    树导航-->
      <div>
        <ul class="left-nav">
          <li>
            <a href="#"> 系统管理 <span class="left-li-font1"></span></a>
            <ul class="left-nav-sub">
              <li v-for="item in subList1"><a :href="item.href">{{item.li}}</a></li>
            </ul>
          </li>

          <li class="li-m li-margin">
            <a href="#"> 个人管理 <span class="left-li-font2"></span></a>
            <ul class="left-nav-sub">
              <li v-for="item in subList2"><a :href="item.href">{{item.li}}</a></li>
            </ul>
          </li>
        </ul>
      </div>

    </div>

    <!--  右边-->
    <div class="main-right">
        <div class="content-header">
          <span class="title">部门管理</span>
        </div>
        <div class="app-container">
          <div class="box">
            <div class="filter-container">
              <el-select v-model="selectDepartment" placeholder="部门名称">
                <el-option v-for="item in departments" :label="item.name"  :value="item.value"></el-option>
              </el-select>
              <el-input placeholder="部门编号" v-model="pagination.id" style="width: 200px;" class="filter-item"></el-input>
              <el-button @click="getAll()" class="dalfBut">查询</el-button>
              <el-button type="primary" @click="handleCreate()">新建</el-button>
            </div>
            <el-table size="small" class="border-top" current-row-key="id" :data="dataList" stripe highlight-current-row>
              <el-table-column prop="id" label="编号" align="center"></el-table-column>
              <el-table-column prop="name" label="名称" align="center"></el-table-column>
              <el-table-column prop="eid" label="主管" align="center"></el-table-column>
              <el-table-column prop="number" label="人数" align="center"></el-table-column>
              <el-table-column prop="info" label="简介" align="center"></el-table-column>
              <el-table-column prop="time" label="注册时间" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                  <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--分页组件-->
            <div class="pagination-container">
              <el-pagination
                      class="pagiantion"
                      @current-change="handleCurrentChange"
                      :current-page="pagination.currentPage"
                      :page-size="pagination.pageSize"
                      layout="total, prev, pager, next, jumper"
                      :total="pagination.total">
              </el-pagination>
            </div>

            <!-- 新增标签弹层 -->
            <div class="add-form">
              <el-dialog title="新增部门" :visible.sync="dialogFormVisible">
                <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="部门编号" prop="id">
                        <el-input v-model="formData.id"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="部门名称" prop="name">
                        <el-input v-model="formData.name"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="注册时间" prop="time">
                        <el-input v-model="formData.time" type="date"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="部门主管" prop="eid">
                        <el-select v-model="formData.eid">
                          <el-option v-for="item in departments" :label="item.name"  :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="部门简介" prop="info">
                        <el-input v-model="formData.info" type="textarea" class="textarea" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancel()">取消</el-button>
                  <el-button type="primary" @click="handleAdd()">添加</el-button>
                </div>
              </el-dialog>
            </div>

            <!-- 编辑标签弹层 -->
            <div class="add-form">
              <el-dialog title="修改部门" :visible.sync="dialogFormVisible4Edit">
                <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="部门名称" prop="name">
                        <el-input v-model="formData.name"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="部门主管">
                        <el-select v-model="formData.eid">
                          <el-option v-for="item in departments" :label="item.name"  :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="部门简介" prop="info">
                        <el-input v-model="formData.info" type="textarea" class="textarea" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancel()">取消</el-button>
                  <el-button type="primary" @click="handleEdit()">修改</el-button>
                </div>
              </el-dialog>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>
</body>
<!--vue-->
<script src="../js/vue/pages/vue-departments.js"></script>
<script src="../js/common.js"></script>
</html>